<template>
    <div ref="chinaMap" class="china-map"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { getVisit } from "../api/api"
type EChartsOption = echarts.EChartsOption;
import china from "./china.json";
const chinaMap = ref<HTMLElement>();


const getVisits = async () => {
    const res = await getVisit();
    initChinaMap(res.data);
    console.log(res);
}

const initChinaMap = (res: { [key: string]: number }) => {
    let colors = ["#FF0000", "#FF4D4D", "#FF8080", "#FFB3B3", "#FFE6E6"]
    const sortArr = Object.keys(res).sort((a, b) => {
        return res[b] - res[a];
    }).slice(0, 5);
    let regions: any[] = [];
    sortArr.forEach((item, index) => {
        regions.push({
            name: item,
            itemStyle: {
                areaColor: colors[index]
            }
        })
    })

    // 创建右上角的排行榜内容
    const top5List = sortArr.map((name, index) => {
        let count: number | string = res[name];
        if (count > 1000) {
            count = (count / 1000).toFixed(2) + 'k'
        }
        return {
            type: 'group', // 使用 group 将文本和颜色块组合在一起
            left: '85%', // 距离左侧 85%
            top: `${10 + index * 25}px`, // 每行间隔 25px
            children: [
                {
                    type: 'rect', // 颜色块
                    shape: {
                        width: 15,
                        height: 15,
                    },
                    style: {
                        fill: colors[index], // 对应的颜色
                    },
                    left: 0,
                    top: 0,
                },
                {
                    type: 'text', // 文本
                    style: {
                        text: `${name}: ${count}`, // 显示名称和访问量
                        fontSize: 12,
                        fill: '#333',
                    },
                    left: 20, // 距离颜色块 20px
                    top: 0,
                },
            ],
        };
    });

    const myChart = echarts.init(chinaMap.value);
    echarts.registerMap("china", china as any);
    let options: EChartsOption = {
        title: {
            text: "访问量",
            left: "left",
            textStyle: {
                color: "#333",
                fontSize: 24,
            },
        },
        tooltip: {
            trigger: "item",
        },
        geo: {
            map: 'china',
            tooltip: {
                formatter: function (params: any) {
                    if (params.name in res) {
                        let count: number | string = res[params.name];
                        if (count > 1000) {
                            count = (count / 1000).toFixed(2) + 'k'
                        }
                        return `${params.name}<br/>访问量: ${count}`
                    }
                    return `${params.name}<br/>访问量: 0`
                }
            },
            // roam: true,
            zoom: 1.5,
            label: {
                show: true,
                color: "#fff",
                fontSize: 10,
            },
            itemStyle: {
                borderColor: "rgba(255, 255, 255, 0.4)",
                areaColor: "rgba(18,77,178,0.2)",
                borderWidth: 1,
                shadowBlur: 1,
                shadowColor: "rgba(189,243,249)",
            },
            emphasis: {
                itemStyle: {
                    areaColor: "#97EFF4",
                    shadowColor: "#05EFF7",
                    shadowOffsetX: 5,
                    shadowOffsetY: 5,
                }
            },
            top: '25%',
            regions: regions,
        },
        series: [],
        graphic: top5List, // 添加右上角的排行榜
    }
    myChart.setOption(options);

    // 添加点击事件监听器
    myChart.on('click', (params: any) => {
        if (params.componentType === 'geo') {
            const provinceName = params.name;
            console.log(`点击了省份: ${provinceName}`);
        }
    });
}

onMounted(() => {
    initChinaMap({});
    getVisits();
})
</script>
<style scoped lang="scss">
.china-map {
    width: 100%;
    height: 100%;
}
</style>